<template>
  <div class="footer">
    <button @click="handleLeft" class="btnLeft" v-if="getLeft!==''">{{getLeft}}</button>
    <button @click="handleCommit" class="btnRight" v-if="receive">{{getText}}</button>
  </div>
</template>

<script type="text/ecmascript-6">
  import OrderType from '../../pages/order/OrderType';

  export default {
    name: 'orderFooter',
    props: {
      status: {
        type: String
      }
    },
    data() {
      return {};
    },
    computed: {
      receive() {
        return !(this.status === OrderType.make);
      },
      getLeft() {
        if (this.status === OrderType.waitPay) {
          return '取消订单';
        } else {
          return '';
        }
      },
      getText() {
        // 确认按钮文字
        switch (this.status) {
          case OrderType.waitPay:
            return '立即付款';
          case OrderType.waitReceipt:
            return '取消订单';
          case OrderType.waitReceipt2:
            return '取消订单';
          case OrderType.make:
            return '确认收货';
          case OrderType.Received:
            return '立即评价';
          case OrderType.Refund:
            return '已退款';
        }
      }
    },
    methods: {
      handleLeft() {
        // 下方左侧按钮
        if (this.status === OrderType.waitPay) {
          this.$emit('handleCommit', 'cancelOrder');
        }
      },
      handleCommit() {
        // 下方右侧按钮或唯一点击事件
        switch (this.status) {
          case OrderType.waitPay:
            this.$emit('handleCommit', 'confirmPay');
            break;
          case OrderType.waitReceipt:
            this.$emit('handleCommit', 'cancelOrder');
            break;
          case OrderType.waitReceipt2:
            this.$emit('handleCommit', 'cancelOrder');
            break;
          case OrderType.make:
            this.$emit('handleCommit', 'confirmReceive');
            break;
          case OrderType.waitReceive:
            this.$emit('handleCommit', 'confirmReceive');
            break;
          case OrderType.Received:
            this.$emit('handleCommit', 'confirmComment');
            break;
        }
      }
    }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../assets/stylus/main.styl";
  .footer {
    position fixed
    width 100vw
    height 14vw
    background white
    flex-center()
    bottom: 0
    button {
      padding: 3vw 8vw;
      box-sizing border-box
      border-radius(50px)
      font-size: vw(16)
      &.btnRight {
        background main-color
        color: white
      }
      &.btnLeft {
        background none
        border(main-color);
        color: main-color
        margin-right 10vw
      }
    }
  }
</style>
